<template>
  <div :class="[isFullScreen?'full-screen':'','aui-card--fill','zoom-box','traffic-detection']"
       ref="fullScreen">
    <div class="traffic-detection-box"
         :style="adaptive">
      <div class="header">
        <slot></slot>
        <big-screen-header pageTitle='综合态势' title="智慧园区大数据" />
      </div>
      <div class="main">
        <div class="main-left">
          <!-- 园区环境统计 -->
          <environmental-statistics />
          <!-- 园区设备运行统计 -->
          <equipment-operation-statistics />
          <!-- • 紧急呼叫情况 -->
          <emergency-call />
        </div>
        <div class="main-center">
          <!-- 园区停车场情况 -->
          <parking-lot-situation />
          <!-- 园区门禁情况 -->
          <access-control-situation />
        </div>
        <div class="main-right">
          <!-- • 园区用水统计情况 -->
          <water-consumption-statistics />
          <!-- • 园区用电统计情况 -->
          <electricity-consumption-statistics />
          <!-- • 设备报警情况 -->
          <device-alarm />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import bigScreenHeader from '@/components/big-screen-header'
import fullScreen from '@/mixins/full-screen'
import environmentalStatistics from './environmental-statistics'
import equipmentOperationStatistics from './equipment-operation-statistics'
import parkingLotSituation from './parking-lot-situation'
import accessControlSituation from './access-control-situation'
import waterConsumptionStatistics from './water-consumption-statistics'
import electricityConsumptionStatistics from './electricity-consumption-statistics'
import deviceAlarm from './device-alarm'
import emergencyCall from './emergency-call'
export default {
  mixins: [mixinViewModule, fullScreen],
  name: '',
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },

      dataForm: {}
    }
  },
  components: {
    bigScreenHeader,
    environmentalStatistics,
    equipmentOperationStatistics,
    emergencyCall,
    parkingLotSituation,
    accessControlSituation,
    waterConsumptionStatistics,
    electricityConsumptionStatistics,
    deviceAlarm
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.traffic-detection-box {
  width: 1920px;
  height: 1080px;
  background-image: url("~@/assets/image/traffic-detection-bg1.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #000;
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
  .header {
    position: relative;
    height: 77px;
  }
  .main {
    width: 1920px;
    height: 1003px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px 30px;
    > div {
      width: 470px;
    }
    .main-center {
      width: 790px;
      display: flex;
      justify-content: space-between;
      > div {
        width: 330px;
        text-align: center;
      }
    }
    .main-right,
    .main-left {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
